{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 作业提交表单 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">记录今日作业</h5>
                </div>
                <div class="card-body">
                    <form id="homework-form">
                        <div class="mb-3">
                            <label class="form-label">科目</label>
                            <select class="form-select" name="subject" required>
                                <option value="">选择科目</option>
                                <option value="语文">语文</option>
                                <option value="数学">数学</option>
                                <option value="英语">英语</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">作业内容</label>
                            <textarea class="form-control" name="content" rows="3" required></textarea>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">耗时（小时）</label>
                            <input type="range" class="form-range" name="hours" min="0" max="10" value="0" id="hoursRange">
                            <div class="text-center" id="hoursValue">0 小时</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">耗时（分钟）</label>
                            <input type="range" class="form-range" name="minutes" min="0" max="59" value="0" id="minutesRange">
                            <div class="text-center" id="minutesValue">0 分钟</div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary mt-3">提交作业</button>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- 学习时间统计 -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">近三天学习时间</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for subject, minutes in subject_times.items() %}
                        <div class="col-4 text-center">
                            <h4>{{ subject }}</h4>
                            <p class="text-muted">
                                {{ minutes // 60 }}小时 
                                {{ minutes % 60 }}分钟
                            </p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <!-- 最近作业记录 -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">最近作业记录</h5>
                </div>
                <ul class="list-group list-group-flush">
                    {% for hw in recent_homework %}
                    <li class="list-group-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ hw.subject }}</strong>
                                <small class="text-muted d-block">{{ hw.content }}</small>
                            </div>
                            <div class="text-end">
                                <span>{{ hw.hours }}小时 {{ hw.minutes }}分钟</span>
                                <small class="text-muted d-block">
                                    {{ hw.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 积分奖励模态框 -->
<div class="modal fade" id="pointsModal" tabindex="-1" aria-labelledby="pointsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <i class="fas fa-star text-warning fa-3x mb-3"></i>
                <h5 class="points-message"></h5>
                <div class="points-animation">+<span></span></div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// 定义显示积分奖励的函数
function showPointsNotification(data) {
    const modal = new bootstrap.Modal(document.getElementById('pointsModal'));
    const messageEl = document.querySelector('#pointsModal .points-message');
    const pointsEl = document.querySelector('#pointsModal .points-animation span');
    const totalPointsEl = document.querySelector('.points-value');
    
    messageEl.textContent = data.message;
    pointsEl.textContent = data.points;
    
    modal.show();
    
    // 更新总积分显示
    totalPointsEl.textContent = parseInt(totalPointsEl.textContent) + data.points;
    
    // 3秒后自动关闭模态框
    setTimeout(() => modal.hide(), 3000);
}

// 更新滑块值显示
const hoursRange = document.getElementById('hoursRange');
const hoursValue = document.getElementById('hoursValue');
hoursRange.addEventListener('input', function() {
    hoursValue.textContent = this.value + ' 小时';
});

const minutesRange = document.getElementById('minutesRange');
const minutesValue = document.getElementById('minutesValue');
minutesRange.addEventListener('input', function() {
    minutesValue.textContent = this.value + ' 分钟';
});

// 提交作业的处理
document.getElementById('homework-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch("{{ url_for('main.homework') }}", {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不正常');
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // 显示积分奖励
            showPointsNotification({
                points: data.points_earned,
                message: `完成作业获得 ${data.points_earned} 积分`
            });
            
            // 刷新页面显示最新记录
            window.location.reload();
        } else {
            alert('提交作业失败，请重试。');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('提交作业失败，请重试。');
    });
});
</script>
{% endblock %}